<template>
  <div class="login">
    <div class="login-container">
      <div class="login-container-left">
        <img src="../../assets/images/login/login_home.png" alt="">
      </div>
      <div class="login-container-right">
        <div class="lcr-wrap">
          <img src="../../assets/images/login/login_logo.png" alt="">
          <p class="login-name">{{ rowname || info.site_title }}</p>
          <el-form
            ref="loginForm"
            :model="loginForm"
            class="login-form"
            :rules="rules"
            auto-complete="on"
            label-position="left"
          >
            <el-form-item prop="username">
              <el-input
                ref="username"
                v-model="loginForm.username"
                placeholder="请输入用户名"
                name="username"
                tabindex="1"
                auto-complete="on"
              >
                <img slot="prefix" src="https://copartner.oss-cn-beijing.aliyuncs.com/goods/2411/11/bzAJL1rsMRctKMoW7YosXKxjMiEUgjvkZKOxNmBv.png" alt="">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                :key="passwordType"
                ref="password"
                v-model="loginForm.password"
                :type="passwordType"
                placeholder="请输入密码"
                name="password"
                tabindex="2"
                auto-complete="on"
                @keyup.enter.native="handleLogin"
              >
                <template #prefix>
                  <img src="https://copartner.oss-cn-beijing.aliyuncs.com/goods/2411/11/qxLDD0uTyjnVHebU3CU8CGdCSAfR12SHzmMtdWWG.png" alt="">
                </template>
                <img slot="suffix" @click="showPwd" class="cursor" :src="passwordType === 'password' ? hiddenImg : showImg" alt="">
              </el-input>
            </el-form-item>
            <div class="tips boxdq">
                <el-checkbox v-model="loginForm.remember" @change="changeRember"
                  >记住密码</el-checkbox
                >
                <span @click="forget">忘记密码？</span>
              </div>
            <el-button
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleLogin"
              >登 录</el-button
            >
          </el-form>
        </div>
      </div>
    </div>
    <!-- 图形验证 -->
    <div class="puzzle-box" v-if="isVerificationShow">
      <PuzzleVerification
        v-model="isVerificationShow"
        :puzzleImgList="puzzleImgList"
        blockType="puzzle"
        width="300"
        height="175"
        blockSize="40"
        @close="close"
        :onSuccess="handleSuccess"
      />
    </div>
  </div>
</template>
<script>
  import { mapActions, mapMutations } from "vuex";
  import rules from "@/rules/login";
  import PuzzleVerification from "@/components/public/puzzleVerification";
  import { info } from "@/api/login";
  import {
    setPermissionToken,
  } from "@/utils/auth";
  import { apiUrl } from "@/utils/public";
  export default {
    name: "Login",
    components: { PuzzleVerification },
    data() {
      return {
        rowname: "",
        loginForm: {
          remember: false,
          username: "",
          password: "",
        },
        passwordType: 'password',
        rules,
        // 图片验证
        puzzleImgList: [
          require("../../assets/images/thumbnail-img02.jpg"),
          require("../../assets/images/thumbnail-img03.jpg"),
          require("../../assets/images/timg.jpg"),
        ],
        isVerificationShow: false,
        // 登陆信息
        info: {
          site_title: "菜东家",
          info: {
            company_name: "菜东家",
          },
        },
        hiddenImg: 'https://copartner.oss-cn-beijing.aliyuncs.com/goods/2411/11/WAo6hXXLyuyySLQc4xWEPuDtcCYGuUUPjR5b5ykn.png',
        showImg: 'https://copartner.oss-cn-beijing.aliyuncs.com/goods/2411/11/yJ6OLSIueAQq38yyBiVKh9f7UXJFYllWPmPKFJSc.png'
      }
    },
    created() {
      // 登陆信息
      this.infoin();
      if (localStorage.getItem("loginForm")) {
        if (JSON.parse(localStorage.getItem("loginForm")).remember) {
          this.loginForm = JSON.parse(localStorage.getItem("loginForm"));
        }
      }
    },
    mounted() {
      if (localStorage.getItem("rowname")) {
        let rowname = JSON.parse(localStorage.getItem("rowname"));
        console.log(rowname, "rowname");
        this.rowname = rowname;
        this.loginForm.username = rowname;
        this.loginForm.password = "";
        // 在这里使用数据
      } else {
        // 数据不存在
      }
      const { name } = this.$route.query;
      // console.log("name", name);
      if (name) {
        this.rowname = name;
      }
    },
    methods: {
      ...mapActions({
        login: "user/login",
        remember: "user/remember",
        set_permisson: "app/set_permisson",
      }),
      ...mapMutations({
        SET_INDEX_SETTING: "user/SET_INDEX_SETTING",
        SET_TOKEN: "user/SET_TOKEN",
      }),
      // 登陆信息
      infoin() {
        let data = Object.assign(
          apiUrl().name
        );
        info(data).then((res) => {
          if (res.errcode == 0) {
            this.info = res.data;
            setPermissionToken(JSON.stringify(res.data.info.domestic));
          } else {
            this.$message.error(res.errmsg);
          }
        });
      },
      // 显示密码
      showPwd() {
        if (this.passwordType === "password") {
          this.passwordType = "";
        } else {
          this.passwordType = "password";
        }
        this.$nextTick(() => {
          this.$refs.password.focus();
        });
      },
      // 登录
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.isVerificationShow = true;
          } else {
            return false;
          }
        });
      },
      changeRember(val) {
        this.remember(val);
      },
      // 图片验证关闭
      close() {
        this.isVerificationShow = false;
      },
      // 图片验证成功 {}
      handleSuccess() {
        let data = Object.assign(
          this.loginForm,
          {
            code: this.info.code,
          },
          apiUrl().name
        );

        this.remember(this.loginForm.remember);
        this.login(data).then((res) => {
          if (res.errcode == 0) {
            localStorage.setItem("loginForm", JSON.stringify(this.loginForm));
            this.$router.push({ path: "/" });
            setTimeout(() => {
              this.isVerificationShow = false;
            }, 500);
          } else {
            this.$message.error(res.errmsg);
            this.info.code = res.data.code;
            this.isVerificationShow = false;
          }
        });
      },
      // 忘记密码？
      forget() {
        this.$confirm("请联系客服，电话：" + this.info.info.mobile + "", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
        })
          .then(() => {})
          .catch(() => {});
      },
    }
  }
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>